{% extends "knn.html" %}

{% block title %}关于PCA{% endblock %}

{% block description %}
<p><b>PCA</b>，亦称主成分分析，是一种数据降维技术。在低维下，数据更容易处理。</p>
<p><b>工作原理：</b>在PCA中，数据从原来的坐标系转换到了新的坐标系，新坐标系的选择是由数据本身决定的。第一个新坐标轴选择的是原始数据中方差最大的方向，第二个新坐标轴的选择和第一个坐标轴正交且具有最大方差的方向。该过程一直在重复，重复次数为原始数据中特征的数目。我们会发现，大部分方差都包含在最前面的几个新坐标轴中。因此，我们可以忽略余下的坐标轴，即对数据进行了降维处理。</p>
<p><b>算法优点：</b>降低数据的复杂性，识别最重要的多个特征，使结果易懂。</p>
<p><b>算法缺点：</b>不一定需要进行主成分分析，且可能损失有用信息。</p>
<p><b>适用数据范围：</b>数值型数据。</p>
{% endblock %}


{% block input %}
<div class="span9">
    <form class="bs-example bs-example-form " method="post" name="knn" role="form" action="" enctype="multipart/form-data">
    {% csrf_token %}
    <!--格式-->
    <label>原始数据维度:</label>
    <input type="text" class="form-control" name="n1" value="{{ n1 }}" placeholder="请输入正确数字" required="required">
    <label>欲降至的维度:</label>
    <input type="text" class="form-control" name="n2" value="{{ n2 }}" placeholder="请输入正确数字" required="required">
    <input type="file" name="csv" required="required" > 
    <p class="form-btn">
    <button type="submit" class="btn btn-primary btn-lg " name="ok" onclick=draw()>上传文件</button>
    </p>
    </form>
</div>
{% endblock %}


{% block resu %}
{% if result  %}
<hr>
<p><h4>分析结果</h4></p>
<br>

<div id="PCA1" style="height:500px;margin-left:2%;margin-right:2%;"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('PCA1')); 
myChart.showLoading({text: "图表数据正在努力加载..."});

var option = {
    title : {
        text: '原始数据散点图',
        subtext: '结果仅供参考'
    },
    tooltip : {
        trigger: 'axis',
        showDelay : 0,
        axisPointer:{
            show: true,
            type : 'cross',
            lineStyle: {
                type : 'dashed',
                width : 1
            }
        }
    },
    legend: {
        data: ['原始数据']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataZoom : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    xAxis : [
        {
            name :{{ Xname|safe }},
            type : 'value',
            scale:true,
            axisLabel : {
                formatter: '{value}'
            }
        }
    ],
    yAxis : [
        {
            name :{{ Yname|safe }},
            type : 'value',
            scale:true,
            axisLabel : {
                formatter: '{value}'
            }
        }
    ],
    series : {{ data1|safe }}
};
        // 为echarts对象加载数据 
        myChart.hideLoading(); 
        myChart.setOption(option);
    </script>


<div id="PCA2" style="height:500px;margin-left:2%;margin-right:2%;"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('PCA2')); 
myChart.showLoading({text: "图表数据正在努力加载..."});

var option = {
    title : {
        text: 'PCA分析结果散点图',
        subtext: '结果仅供参考'
    },
    tooltip : {
        trigger: 'axis',
        showDelay : 0,
        axisPointer:{
            show: true,
            type : 'cross',
            lineStyle: {
                type : 'dashed',
                width : 1
            }
        }
    },
    legend: {
        data: ['PCA分析结果']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataZoom : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    xAxis : [
        {
            axisLine : {onZero: false},
            name :'x',
            type : 'value',
            scale:true,
            axisLabel : {
                formatter: '{value}'
            }
        }
    ],
    yAxis : [
        {
            name :'y',
            type : 'value',
            scale:true,
            axisLabel : {
                formatter: '{value}'
            }
        }
    ],
    series : {{ data2|safe }}
};
        // 为echarts对象加载数据 
        myChart.hideLoading(); 
        myChart.setOption(option);
    </script>


{% endif %}
{% endblock %}
